<template>
  <div class="dashboard-container">
    <el-card class="hr-block">
      <el-form ref="formData" :model="formData" label-width="120px" class="formInfo">
        <el-form-item label="部门:">
          <el-checkbox-group v-model="formData.deptID">
            <el-checkbox
              v-for="item in departments"
              :key="item.id"
              :label="item.name"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="考勤状态：">
          <el-radio-group v-model="formData.stateID">
            <el-radio
              v-for="item in stateData.holidayType"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            >
              {{ item.value }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="app-container">
      <el-card>
        <el-table
          ref="filterTable"
          :data="tabList"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="100"
          />
          <el-table-column
            prop="username"
            label="姓名"
            width="100"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            :filters="filterList"
            :filter-method="filterHandler"
          />
          <el-table-column
            prop="mobile"
            label="手机"
          />
          <template v-for="(item, index) in list">
            <el-table-column
              :key="index"
              width="110"
              :label="item.day + '' | formatDates"
              :prop="item.adtStatu + ''"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.attendanceRecord[index].adtStatu | formatholidayType }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <el-pagination
          style="text-align:center;"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getMockAttendancesList } from '@/api/attendances'
import Attendance from '@/api/constant/attendance'
import { getDeparments } from '@/api/departments'
export default {
  filters: {
    formatholidayType(val) {
      const str = val.toString()
      const obj = Attendance.holidayType.find(el => el.id === str)
      return obj.value || '未知'
    },
    formatDates(val) {
      const time = val.match(/(\d{4})(\d{2})(\d{2})/).filter((item, index) => index > 0).join('-')
      return time
    }
  },
  data() {
    return {
      formData: {
        page: 1,
        pagesize: 10,
        keyword: this.keyword,
        deptID: [], // 性别
        stateID: ''
      },
      departments: [],
      stateData: Attendance,
      tableData: [],
      list: [],
      tabList: [], // 新截取的列表数据
      page: 1, // 当前默认第一页
      pagesize: 10, // 一页10条
      total: 0,
      filterList: [], // 需要筛选的数据
      introduce: [] // 部门
    }
  },
  created() {
    this.getMockAttendancesList()
    this.getDeparments()
  },
  methods: {
    // 获取考勤列表
    async getMockAttendancesList() {
      const { rows, total } = await getMockAttendancesList()
      this.tableData = rows
      this.list = rows[0].attendanceRecord
      //   console.log(this.list)
      this.total = total
      this.tabList = this.tableData.slice(this.page - 1, this.pagesize)
      // 过滤出部门 去重
      this.introduce = [...new Set(this.tableData.map(item => item.departmentName))]
      console.log(this.introduce)
      const arr = []
      this.introduce.forEach((item, index) => {
        const obj = {}
        obj.text = item
        obj.value = item
        arr.push(obj)
      })
      this.filterList = arr
    },
    // 获取组织部门列表
    async getDeparments() {
      const { depts } = await getDeparments()
      this.departments = depts
    //   console.log(this.departments)
    },
    handleCurrentChange(val) {
      this.page = val
      const start = this.pagesize * val - this.pagesize
      const end = this.pagesize * val
      if (this.tableData.length <= this.pagesize) { // 等于10条或者10条以内
        this.tabList = this.tableData
      } else if (this.pagesize * val >= this.tableData.length) { // 当超出了最大总数，即最后一页条数是尾数
        this.tabList = this.tableData.slice(start)
      } else {
        this.tabList = this.tableData.slice(start, end)
      }
    },
    filterHandler(value, row, column) {
      console.log(value, row, column)
      this.tabList = this.tableData
      const property = column['property']
      //   console.log(property)
      return row[property] === value
    }
  }
}
</script>

<style scoped>

</style>
